<template>
  <view class="notification-detail">
    <!-- 导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <view slot="content" class="nav-title">通知详情</view>
    </cu-custom>

    <!-- 通知内容 -->
    <view class="notification-content">
      <!-- 通知头部 -->
      <view class="notification-header">
        <view class="flex align-center margin-bottom-sm">
          <view :class="['notification-icon', 'margin-right-sm', getNotificationIcon(priority)]"></view>
          <view class="flex-sub">
            <view class="notification-title text-lg text-bold">{{ title }}</view>
            <view class="notification-time text-sm text-gray margin-top-xs">
              {{ formatTime(time) }}
            </view>
          </view>
          <view :class="['priority-badge', getPriorityBadge(priority)]">
            {{ getPriorityText(priority) }}
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 通知正文 -->
      <view class="notification-body">
        <view class="content-wrapper">
          <rich-text :nodes="formatContent(content)" class="rich-content"></rich-text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="notification-actions">
        <button class="cu-btn bg-blue lg block" @tap="goBack">
          知道了
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NotificationDetail',
  
  data() {
    return {
      id: '',
      title: '',
      content: '',
      time: '',
      priority: 'M'
    }
  },

  onLoad(options) {
    this.id = options.id || '';
    this.title = decodeURIComponent(options.title || '通知详情');
    this.content = decodeURIComponent(options.content || '');
    this.time = decodeURIComponent(options.time || '');
    this.priority = options.priority || 'M';
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '通知详情'
    });
  },

  methods: {
    // 返回上一页
    async goBack() {
      try {
        // 标记通知为已读
        if (this.id) {
          await this.markNotificationAsRead(this.id);
        }
        uni.navigateBack();
      } catch (error) {
        console.error("标记已读失败:", error);
        // 即使标记失败也要返回
        uni.navigateBack();
      }
    },

    // 标记通知为已读
    async markNotificationAsRead(anntId) {
      try {
        const { announcement } = await import("@/api/sys/announcement.js");
        const response = await announcement.markAsRead({
          anntId: anntId,
          readFlag: "1",
        });

        if (response && response.success) {
          console.log("通知已标记为已读");
        } else {
          console.error("标记通知已读失败:", response?.message);
        }
      } catch (error) {
        console.error("标记通知已读失败:", error);
      }
    },

    // 获取通知图标
    getNotificationIcon(priority) {
      const iconMap = {
        'H': 'cuIcon-warn text-red',
        'M': 'cuIcon-notification text-orange', 
        'L': 'cuIcon-info text-blue'
      };
      return iconMap[priority] || 'cuIcon-notification text-blue';
    },

    // 获取优先级徽章样式
    getPriorityBadge(priority) {
      const badgeMap = {
        'H': 'badge-high',
        'M': 'badge-medium',
        'L': 'badge-low'
      };
      return badgeMap[priority] || 'badge-medium';
    },

    // 获取优先级文本
    getPriorityText(priority) {
      const textMap = {
        'H': '高',
        'M': '中',
        'L': '低'
      };
      return textMap[priority] || '中';
    },

    // 格式化时间
    formatTime(dateTime) {
      if (!dateTime) return '';
      
      const date = new Date(dateTime);
      if (isNaN(date.getTime())) return dateTime; // 如果日期无效，返回原始值
      
      const now = new Date();
      const diffMs = now - date;
      const diffMins = Math.floor(diffMs / (1000 * 60));
      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

      // 对于未来时间或超过7天的时间，直接显示完整日期
      if (diffMs < 0 || diffDays >= 7) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      }

      // 相对时间显示
      if (diffMins < 1) return '刚刚';
      if (diffMins < 60) return `${diffMins}分钟前`;
      if (diffHours < 24) return `${diffHours}小时前`;
      return `${diffDays}天前`;
    },

    // 格式化内容
    formatContent(htmlContent) {
      if (!htmlContent) return '';
      
      // 如果是HTML内容，直接返回用于rich-text组件
      if (htmlContent.includes('<')) {
        return htmlContent;
      }
      
      // 如果是纯文本，转换为HTML格式
      return htmlContent.replace(/\n/g, '<br/>');
    }
  }
}
</script>

<style lang="scss" scoped>
.notification-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
}

.notification-content {
  padding: 40rpx 32rpx;
}

.notification-header {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 32rpx;
  
  .notification-icon {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 36rpx;
  }
  
  .notification-title {
    color: #333;
    line-height: 1.4;
  }
  
  .notification-time {
    color: #999;
  }
  
  .priority-badge {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: white;
    font-weight: bold;
    
    &.badge-high {
      background: #ff4d4f;
    }
    
    &.badge-medium {
      background: #fa8c16;
    }
    
    &.badge-low {
      background: #52c41a;
    }
  }
}

.divider {
  height: 2rpx;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 32rpx 0;
}

.notification-body {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
  
  .content-wrapper {
    line-height: 1.8;
    
    .rich-content {
      color: #333;
      font-size: 32rpx;
      
      /deep/ p {
        margin: 16rpx 0;
        
        &:first-child {
          margin-top: 0;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
      
      /deep/ strong {
        color: #1890ff;
        font-weight: bold;
      }
      
      /deep/ h3 {
        color: #1890ff;
        font-size: 36rpx;
        font-weight: bold;
        margin: 24rpx 0 16rpx 0;
      }
      
      /deep/ div {
        margin: 16rpx 0;
      }
    }
  }
}

.notification-actions {
  padding: 0 20rpx;
  
  .cu-btn {
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
  }
}
</style>
